import { useEffect } from "react";
import { useState } from "react";

import { Button,CircularProgress  } from "@mui/material";

import Day from "./Day";
import styles from "./Home.module.css";

import { useCurrentWeather } from "../hooks/useCurrentWeather";

function Home() {

  const { temperature, isLoading, weatherIcon } = useCurrentWeather();
 

  return (
    <section className={styles.section}>
      {!isLoading && (
        <>
        <Day temperature={temperature} weatherIcon={weatherIcon}/>
        <Button variant="contained" size="large">
        Get Start
        </Button>
      </>

      )}
      {isLoading && <CircularProgress />}
      
    </section>
  );
}
export default Home;
